<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>查看统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="statistics">
          <div class="item">
            <p class="value">{{data.courseTotal}}</p>
            <p class="key">已发布课程</p>
          </div>
          <div class="item">
            <p class="value">{{data.advertTotal}}</p>
            <p class="key">发布的活动</p>
          </div>
          <div class="item">
            <p class="value">{{data.courseTotalTimes}}</p>
            <p class="key">课程学习总时长(分钟)</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: {}
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        this.$api.statistics.getTotalInfo().then(res => {
          if(res.success) {
            this.data = res.data
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .statistics{
    .item{
      width: 200px;
      display: inline-block;
      text-align: center;
      margin: 20px;
      .value{
        font-size: 28px;
        color: #409EFF;
        font-weight: 400;
      }
      .key{
        font-size: 14px;
        color: #666;
        margin-top: 20px;
      }
    }
  }
 
</style>
